<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<body>
       <h1>用户注册</h1>
           <ul type="none" style="padding-left:0px">
               <li>用户名
                <input type="text" value="" id="uname">
                <span id="msg" style="color:red"></span>
				<input type="button" onclick="check()" value="检查是否存在">
                </li>
                <li>
                   密 &nbsp&nbsp&nbsp码<input type="password" value="" id="upwd">
                </li>
                <li><img src="http://127.0.0.1:3000/user/code" title="看不清点击换一张" onclick="cimg(this)"></li>
                <li>验证码 <input type="text" name="code"></li>
               <li><input type="button" onclick="reg()" value="注册"></li>
           </ul>
		  <script>
            //   --------------------------端口1-------------------------
            function cimg(item){
                //alert(123);
                item.src = "http://127.0.0.1:3000/user/code?t="+new Date().getTime();
            }
            //   ------------------------端口2----------------------------
          function check(){  
            //使用ajax将用户名发送服务器并且接收结果
            //1 该用户名己使用  0  欢迎使用
            //1:获取用户输入用户名
            var uname = document.getElementById("uname");
            //1:创建对象
            var xhr = new XMLHttpRequest();
            //2:指定接收数据函数
            xhr.onreadystatechange = function(){
                //5:接收数据
                //alert(xhr.responseText);
            if(xhr.readyState===4&&xhr.status===200){
                 var msg = document.getElementById("msg");
                 if(xhr.responseText==1){
                     msg.innerHTML = "该用户名己存在";
                 }else{
                     msg.innerHTML = "欢迎使用";
                 }
              }

            }    
            //3:指定服务器地址
            var url = "http://127.0.0.1:3000/user/isexists?uname="+uname.value;
            xhr.open("GET",url,true);
            //4:发送
            xhr.send();
          }

        //   ---------------------------端口3-------------------------
        function reg(){
            // http://127.0.0.1:3000/user/ref  POST
            //alert(123);
            //1获取用户输入的用户名和密码
            var uname = document.getElementById("uname");
            var upwd = document.getElementById("upwd");
            //alert(uname.value+"|"+upwd.value);
            //2创建对象AJAX
            var xhr = new XMLHttpRequest();
            //3指定接收函数
            xhr.onreadystatechange = function(){
                 //7接收数据
                 if(xhr.readyState===4&&xhr.status===200){
                     var obj = xhr.responseText;
                     if(obj==1){
                         alert("注册成功");
                     }else{
                         alert("注册失败");
                     }
                 }
            }
            //4指定服务器地址
            var url ="http://127.0.0.1:3000/user/ref";
            xhr.open("post",url,true);
            //5指定请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //6发送请求
            xhr.send(`uname=${uname.value}&upwd=${upwd.value}`);
        }
       </script>
</body>
</html>